<template>
  <view class="picture_box">
    <!-- 顶部个人信息 -->
    <view class="userInfo_box">
      <!-- 头像 -->
      <view class="userInfo_image">
        <image :src="pictureDetailsList.user.avatar" mode="widthFix" />
      </view>
      <!-- 名字/时间 -->
      <view class="userInfo_name_time">
        <view class="userInfo_name">{{ pictureDetailsList.user.name }}</view>
        <view class="userInfo_time">{{ pictureDetailsList.newTime }}</view>
      </view>
    </view>
    <!-- 图片点赞与收藏 -->
    <view class="image_like_collection">
      <view class="image_box">
        <imagesLide @directionForm="directionForm">
          <image :src="pictureDetailsList.thumb" mode="widthFix" />
        </imagesLide>
      </view>
      <view class="like_collection">
        <view class="iconfont icondianzan currency">
          {{ pictureDetailsList.user.follower }}
        </view>
        <view class="iconfont iconshoucang currency">收藏</view>
      </view>
    </view>

    <!-- 下载图片 -->
    <view class="downLoadImage" @click="handleDownLoad">
        <view class="downLoad">下载图片</view>
    </view>
  </view>
</template>
<script>
import moment from "moment";
import imagesLide from "../../components/imageslide";
moment.locale("zh-cn");
export default {
  data() {
    return {
      pictureDetailsList: {},
      albumList: [],
      commentList: [],
      hotList: [],
      imgIndex: 0,
    };
  },
  onLoad() {
    const { imageIndex,imageList } = getApp().globalData;
    this.imgIndex = imageIndex;
    this.getImageList()
  },
  methods: {
    getImageList() {
      const { imageList } = getApp().globalData;
      this.pictureDetailsList = imageList[this.imgIndex];
      this.pictureDetailsList.newImage =
        this.pictureDetailsList.thumb +
        this.pictureDetailsList.rule.replace("$<Height>", 360);
      this.pictureDetailsList.newTime = moment(
        this.pictureDetailsList.atime * 1000
      ).fromNow();
      this.getList(this.pictureDetailsList.id);
    },
    getList(id) {
      this.request({
        url: `http://157.122.54.189:9088/image/v2/wallpaper/wallpaper/${id}/comment`,
      }).then((res) => {
        console.log(res);
      });
    },
    directionForm(e) {
      const direction = e.direction;
      const { imageList } = getApp().globalData;
      if (direction === "left" && this.imgIndex < imageList.length - 1) {
        this.imgIndex++;
        this.getImageList()
      } else if(direction === "right" && this.imgIndex > 0){
        this.imgIndex--;
        this.getImageList()  
      }
    },
    async handleDownLoad(){
        await uni.showLoading({
            title: '下载中'
        });

        const reslut = await uni.downloadFile({
            url: this.pictureDetailsList.img
        });

        const {tempFilePath} = reslut[1]


        const reslut2 = await uni.saveImageToPhotosAlbum({
            filePath: tempFilePath
        });

        uni.hideLoading();
        await uni.showToast({
            title: '下载成功'
        });

    }
  },
  components: {
    imagesLide,
  },
};
</script>

<style lang='scss' scope>
.picture_box {
  .userInfo_box {
    padding: 20rpx;
    display: flex;
    .userInfo_image {
      padding: 0 20rpx;
      image {
        width: 44px;
        height: 44px;
        border-radius: 50%;
      }
    }
    .userInfo_name_time {
      .userInfo_name {
        color: black;
        font-size: 16px;
      }
      .userInfo_time {
        padding: 10rpx 0;
        font-size: 12px;
        color: #d5d2d2;
      }
    }
  }
  .image_like_collection {
    margin-top: 10rpx;
    .like_collection {
      display: flex;
      height: 40px;
      border-bottom: 2px solid #eee;
      .currency {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .downLoadImage{
      height: 90rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10rpx 0;
      .downLoad{
          width: 90%;
          height: 90%;
          background-color: #d73786;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          font-size: 18px;
          font-weight: 600;
      }
  }
}
</style>
